<!-- wxfa13823118dce3e0 -->
<template>
	<view class="content">
		<div rl-type="stop" class="stop ">
			<div class="tabs" :class="active == 0 ? 'navactive' : ''" @click="active = 0">福彩3D</div>
			<div class="tabs" :class="active == 1 ? 'navactive' : ''" @click="active = 1">双色球</div>
			<div class="tabs" :class="active == 2 ? 'navactive' : ''" @click="active = 2">快乐8</div>
			<div class="tabs" :class="active == 3 ? 'navactive' : ''" @click="active = 3">七星彩</div>
		</div>


		<!-- <div class="bigtitle">号码</div> -->
		<div class="title" style="font-size: 18px">开奖号码：</div>
		<div class="overs">
			<span class="cishu" style="margin-left: 20px;" v-show="active == 0"><span>已选:</span><a>{{ fucai3dnumber
			}}</a><span>个</span></span>
			<span class="cishu" style="margin-left: 20px;" v-show="active == 1"><span>已选:</span><a>{{ shuangsenumber
			}}</a><span>个</span></span>
			<span class="cishu" style="margin-left: 20px;" v-show="active == 2"><span>已选:</span><a>{{ kuaile8number
			}}</a><span>个</span></span>
			<span class="cishu" style="margin-left: 20px;" v-show="active == 3"><span>已选:</span><a>{{ liuhenumber
			}}</a><span>个</span></span>
		</div>
		<div class="boxs">
			<ul class="ull">
				<li class="active" v-for="(  item, index  ) in   chackfucai3d  " @click="del(index, 'fucai3d')"
					v-show="active == 0">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackshuangse  " @click="del(index, 'shuangse')"
					v-show="active == 1">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackkuaile8  " @click="del(index, 'kuaile8')"
					v-show="active == 2">
					{{ item.num }}
				</li>
				<li class="active" v-for="(  item, index  ) in   chackliuhe  " @click="del(index, 'liuhe')"
					v-show="active == 3">
					{{ item.num }}
				</li>
			</ul>
		</div>
		<div class="clears" v-if="active == 0 && chackfucai3d.length > 0" @click="delall('fucai3d')">一键清空</div>
		<div class="clears" v-if="active == 1 && chackshuangse.length > 0" @click="delall('shuangse')">一键清空</div>
		<div class="clears" v-if="active == 2 && chackkuaile8.length > 0" @click="delall('kuaile8')">一键清空</div>
		<div class="clears" v-if="active == 3 && chackliuhe.length > 0" @click="delall('liuhe')">一键清空</div>




		<div class="title" v-if="active == 0 && fucai3dnumber != 0">福彩3D号码统计结果：</div>
		<div class="title" v-if="active == 1 && shuangsenumber != 0">双色球号码统计结果：</div>
		<div class="title" v-if="active == 2 && kuaile8number != 0">快乐8号码统计结果：</div>
		<div class="title" v-if="active == 3 && liuhenumber != 0">七星彩统计结果：</div>
		<!-- 福利彩票3D -->
		<div class="bgss" v-if="active == 0 && fucai3dcount.length > 0">
			<div class="bigbox" v-for="(  item, index  ) in   fucai3dcount  ">
				<div>
					<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
					<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
				</div>
				<div class="boxs">
					<ul class="ulle" v-if="fucai3dnumber != 0">
						<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'fucai3d')">
							{{ items }}
						</li>
					</ul>

				</div>
			</div>
		</div>
		<!-- 双色球 -->
		<div class="bgss" v-if="active == 1 && shuangsecount.length > 0">
			<div class="bigbox" v-for="(  item, index  ) in   shuangsecount  ">
				<div>
					<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
					<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
				</div>
				<div class="boxs">
					<ul class="ulle" v-if="shuangsenumber != 0">
						<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'shuangse')">
							{{ items }}
						</li>
					</ul>

				</div>
			</div>
		</div>
		<!-- 快乐8  -->
		<div class="bgss" v-if="active == 2 && kuaile8count.length > 0">
			<div class="bigbox" v-for="(  item, index  ) in   kuaile8count  ">
				<div>
					<span class="cishu"><span>出现次数:</span><a>{{ item.cishu }}</a></span>
					<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
				</div>
				<div class="boxs">
					<ul class="ulle" v-if="kuaile8number != 0">
						<li class="active" v-for="(  items, index  ) in   item.list  " @click="del(index, 'kuaile8')">
							{{ items }}
						</li>
					</ul>

				</div>
			</div>
		</div>
		<!-- 七星彩 -->
		<div class="bgss" v-if="active == 3 && liuhecount.length > 0">
			<div class="bigbox" v-for="(  item, index  ) in   liuhecount  ">
				<div class="overflow">
					<span class="cishu"><span>号码出现次数:</span><a>{{ item.cishu }}</a></span>
					<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
				</div>
				<div class="boxs">
					<ul class="ulle" v-if="liuhenumber != 0">
						<li class="active" v-for="(  items, index  ) in   item.list  " @click="del3d(index, 'kuaile8XS')">
							{{ items }}
						</li>
					</ul>

				</div>
			</div>
		</div>


		<div class="title">请选择本次开奖号码：</div>
		<ul class="bgs goul">
			<li class="fucai" :animation="animationData" v-show="active == 0"
				:class="[(item.active ? 'active' : ''), (item.fangda ? 'fangda' : '')]" v-for="(item, index) in fucai3d"
				@click="click(item, 'fucai3d')">
				{{ item.num }}
			</li>
			<li v-show="active == 1" :class="[(item.active ? 'active' : ''), (item.fangda ? 'fangda' : '')]"
				v-for="(item, index) in shuangse" @click="click(item, 'shuangse')">
				{{ item.num }}
			</li>
			<li v-show="active == 2" :class="[(item.active ? 'active' : ''), (item.fangda ? 'fangda' : '')]"
				v-for="(item, index) in kuaile8" @click="click(item, 'kuaile8')">
				{{ item.num }}
			</li>
			<li v-show="active == 3" :class="[(item.active ? 'active' : ''), (item.fangda ? 'fangda' : '')]"
				v-for="(item, index) in liuhe" @click="click(item, 'liuhe')">
				{{ item.num }}
			</li>
		</ul>
		<!-- <div class="bigtitle" v-show="active == 3">生肖</div> -->

		<div class="title" v-if="active == 3" style="font-size: 18px">开奖生肖：</div>
		<div class="overs" style="margin-top: 20px">
			<span class="cishu" style="margin-left: 20px;" v-if="active == 3"><span>已选生肖:</span><a>{{ liuheSXnumber
			}}</a><span>个</span></span>
		</div>
		<div class="boxs" v-if="active == 3">
			<ul class="ull">
				<li class=" colorblues" v-for="(  item, index  ) in   chackliuheSX  " @click="del(index, 'liuheSX')"
					v-show="active == 3">
					{{ item.num | getword }}
				</li>
			</ul>
		</div>
		<div class="clears" style="margin-bottom: 30px" v-if="active == 3 && chackliuheSX.length > 0"
			@click="delall('liuheSX')">一键清空</div>


		<div class="bgss" v-if="active == 3 && liuheSXcount.length > 0">
			<div class="bigbox" v-for="(  item, index  ) in   liuheSXcount  ">
				<div>
					<span class="cishu"><span>生肖出现次数:</span><a>{{ item.cishu }}</a></span>
					<span class="contents"><span style="margin-left:10px">总个数:</span><a>{{ item.count }}</a></span>
				</div>
				<div class="boxs">
					<ul class="ulle" v-if="liuheSXnumber != 0">
						<li class=" colorblues" v-for="(  items, index  ) in   item.list  ">
							{{ items | getword }}
						</li>
					</ul>

				</div>
			</div>
		</div>




		<div class="title" v-if="active == 3">请选择本次开奖生肖：</div>
		<ul>
			<li v-show="active == 3" :class="[(item.active ? 'colorblues' : ''), (item.fangda ? 'fangda' : '')]"
				v-for="(item, index) in liuheSX" @click="click(item, 'liuheSX')">
				{{ item.num | getword }}
			</li>
		</ul>
	</view>
</template>

<script>

import { jsonp } from 'vue-jsonp'

export default {
	data() {
		return {
			animationData: {},
			fucai3d: [],//福彩3D
			fucai3dnumber: 0,
			chackfucai3d: [],//点击号码列表
			fucai3dcount: [],//次数号码列表
			shuangse: [],//双色球
			shuangsenumber: 0,
			chackshuangse: [],//点击号码列表
			shuangsecount: [],//次数号码列表
			kuaile8: [],//快了8
			kuaile8number: 0,
			chackkuaile8: [],//点击号码列表
			kuaile8count: [],//次数号码列表
			liuhe: [],//七星彩
			liuhenumber: 0,
			chackliuhe: [],//点击号码列表
			liuhecount: [],//次数号码列表
			liuheSX: [],//七星彩生肖
			liuheSXnumber: 0,
			chackliuheSX: [],//点击号码列表
			liuheSXcount: [],//次数号码列表
			activeball: 0,
			active: 0,
			countarray: [],
			title: 'Hello',
			buttonAnimation: ""
		}
	},
	onLoad() {

	},
	filters: {
		getword(value) {
			let obj = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"]
			return obj[value]
		}
	},
	onShow: function () {
	},
	created() {
		this.getdata()
	},
	// 福彩3D 0到9      双色球 01到33   快乐8 01到80  六合。01到49。12个生肖
	methods: {
		resetcishu(arraybig, arraysmall) {
			// arraysmall  选择的号码
			let arraybigs = JSON.parse(JSON.stringify(arraybig))
			let arraysmalls = JSON.parse(JSON.stringify(arraysmall))

			arraybigs = arraybigs.map(bigitems => {
				let cishu = 0
				arraysmalls.map(items => {
					if (bigitems.num === items.num) {
						cishu++
					}
				})
				if (cishu > 0) {
					bigitems.active = true
				} else {
					bigitems.active = false
				}
				return bigitems
			})
			return arraybigs
		},
		countOccurrencesAndGroup(numbers) {
			// 初始化一个对象用于存储每个数字出现的次数
			const countMap = {};

			// 遍历数字字符串，统计每个数字出现的次数
			for (const num of numbers) {
				if (countMap[num]) {
					countMap[num]++;
				} else {
					countMap[num] = 1;
				}
			}

			// 初始化一个对象用于存储按次数分组的结果
			const groupedResult = {};

			// 遍历计数对象，按次数分组
			for (const num in countMap) {
				const count = countMap[num];
				if (!groupedResult[count]) {
					groupedResult[count] = [];
				}
				groupedResult[count].push(parseInt(num));
			}
			for (const item in groupedResult) {
				this.countarray.push({
					cishu: item,
					list: groupedResult[item],
					count: groupedResult[item].length
				})
			}
			return this.countarray;
		},
		getcontent(arraybig, arraysmall) {
			console.log(arraybig)
			// arraysmall  选择的号码
			let arraybigs = JSON.parse(JSON.stringify(arraybig))
			let arraysmalls = JSON.parse(JSON.stringify(arraysmall))
			let signnum = [];
			arraysmalls.map(item => {
				signnum.push(item.num)
			})
			let groupedResult = []
			arraybigs.map(item => {
				console.log(item.active == false)
				if (item.active == false) {
					groupedResult.push(item.num)
				}
			})
			this.countarray = []
			if (arraybigs.length != groupedResult.length) {
				this.countarray.push({
					cishu: 0,
					list: groupedResult,
					count: groupedResult.length
				})
			}
			return this.countOccurrencesAndGroup(signnum)

		},
		delall(name) {
			// for (var i = 0; i < this['chack' + name].length; i++) {
			// 	this['chack' + name].splice(i, 1);
			// }
			this['chack' + name] = []
			this[name] = this.resetcishu(this[name], this['chack' + name])
			//以次数为单位 获取每次有哪些号码
			this[name + 'count'] = JSON.parse(JSON.stringify(this.getcontent(this[name], this['chack' + name])))
			this[name + 'number'] = this['chack' + name].length;
		},
		del(index, name) {
			this['chack' + name].splice(index, 1);
			this[name] = this.resetcishu(this[name], this['chack' + name])
			//以次数为单位 获取每次有哪些号码
			this[name + 'count'] = JSON.parse(JSON.stringify(this.getcontent(this[name], this['chack' + name])))
			this[name + 'number'] = this['chack' + name].length;
		},
		click(item, name) {
			this['chack' + name].push(item)
			this[name] = this.resetcishu(this[name], this['chack' + name])
			this[name] = this[name].map(items => {
				if (items.num == item.num) {
					items.fangda = true;
				}
				return items
			})
			setTimeout(() => {
				this[name] = this[name].map(items => {
					if (items.num == item.num) {
						items.fangda = false;
					}
					return items
				})
			}, 100);
			//以次数为单位 获取每次有哪些号码
			this[name + 'count'] = JSON.parse(JSON.stringify(this.getcontent(this[name], this['chack' + name])))
			this[name + 'number'] = this['chack' + name].length;



			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		uni.createSelectorQuery().select(".goul").boundingClientRect(function (res) { //定位到你要的class的位置
			// 			console.log("标签获取====>", res)
			// 			uni.pageScrollTo({
			// 				scrollTop: res.height,
			// 				duration: 0
			// 			});
			// 		}).exec()

			// 	}, 50)

			// })
		},
		getdata() {
			this.fucai3d = [];
			for (var i = 0; i < 10; i++) {
				this.fucai3d.push({ active: false, num: i + '' })
			}
			this.shuangse = [];
			for (var i = 1; i <= 33; i++) {
				this.shuangse.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			this.kuaile8 = [];
			for (var i = 1; i <= 80; i++) {
				this.kuaile8.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			this.liuhe = [];
			for (var i = 1; i <= 49; i++) {
				this.liuhe.push({ active: false, num: i <= 9 ? '0' + i : i })
			}
			console.log(this.liuhe)
			this.liuheSX = [];
			let obj = ["鼠", "牛", "虎", "兔", "龙", "蛇", "马", "羊", "猴", "鸡", "狗", "猪"]
			for (var i = 0; i < obj.length; i++) {
				this.liuheSX.push({ active: false, num: i })
			}
		},

	}
}
</script>

<style>
.clears {
	color: white;
	width: 100px;
	/* height: 37px; */
	line-height: 30px;
	background: #a7000f;
	text-align: center;
	margin: 0 auto;
	border-radius: 4px;
	font-size: 13px;
	margin-top: 10px;
}

.overs {
	overflow: hidden;
}

.overflow {
	overflow: hidden;
}

.content {
	padding-bottom: 20px;
}

.bigbox {
	margin-top: 10px;
}

.cishu {
	font-size: 15px;
	float: left;
	color: #757575;
}

.contents {
	text-align: right;
	padding-top: 20px;
	padding-right: 7px;
	color: #757575;
	font-size: 15px;
	margin-left: 24px;
}

.fangda {
	transform: scale(0.5);
}

.contents span {
	float: left;
}

.contents a {
	color: #fd503eff;
	float: left;
}

.cishu a {
	color: #fd503eff;
	float: left;
}

.cishu span {
	float: left;
}

.number {
	padding-left: 20px;
	margin-top: 5px;
	color: red;
	font-size: 15px;
}

.tishi {
	color: #939393;
	line-height: 50px;
	margin-left: 20px;
}

.bgss {
	background: #ededed;
	width: 92%;
	margin: 0 auto;
	border-radius: 5px;
	padding: 7px;
	box-sizing: border-box;
}

.boxs {
	width: 100%;
	/* min-height: 50px; */
}

.bigtitle {
	color: #333;
	margin-top: 30px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 17px;
	margin-left: 20px;
}

.title {
	color: rgb(85, 85, 85);
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
	margin-left: 20px;
}

ul {
	margin: 0 auto;
	overflow: hidden;
	padding: 0 20px;
}

.ull {
	padding: 10px;
}

.ull li {
	width: 38px !important;
	height: 38px !important;
	line-height: 38px !important;
}

.ulle {
	padding: 5px 0px;
}

.ulle li {
	width: 26px !important;
	height: 26px !important;
	font-size: 12px !important;
	line-height: 26px !important;
	margin: 2px !important;
}

ul li {
	list-style: none;
	width: 41px;
	height: 41px;
	line-height: 41px;
	background: rgb(227, 227, 227);
	color: rgb(1, 0, 5);
	text-align: center;
	float: left;
	margin: 3px;
	border-radius: 50%;
	transition: all 0.3s;
}

.ballactive {}

.stop {
	background: rgb(245, 246, 249);
	border-radius: 10px;
	display: flex;
	width: 90%;
	margin: 0 auto;
	margin-top: 20px;
	overflow: hidden;
}

.colorblues {
	color: white !important;
	background: linear-gradient(180deg, #31CAF5 0%, #198CFF 100%) !important;
}

.stop div {
	flex: 1;
	text-align: center;
	line-height: 35px;
	font-size: 14px;
}

.active {
	background: linear-gradient(180deg, #FE8A5C 0%, #FF4D4D 100%) !important;

	/* background:linear-gradient(180deg, #F0F7FE 100%, #FFFFFF 100%); */
	color: white !important;
}

.navactive {
	background: #fd503eff;
	color: white;
}

.bgs {
	width: 95%;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 10px;
	background-color: rgb(243, 242, 247);
	border-radius: 5px;
}

.bgs li>div {
	color: rgb(1, 0, 5);
}

.fucai {
	width: 61px !important;
	height: 61px !important;
	line-height: 61px !important;
	font-size: 26px;
}
</style>
